Logo LilyCSS

About

This is a minimal CSS library to design semantic webpages with pure CSS on everything it is possible.

The goal of this project is using standard HTML elements in their intended roles (so no links pretending to be buttons), to make simpler and more acessible web pages. There is some inspiration from Markdown typical formatting, so as a side effect this lib also helps to make an HTML<->Markdown conversion simple.

Textual elements

Formatting

Pizza in italic
Keep hydrated in bold
Some reference in underline
Just a prank bro in strikethrough
Spoiler: The movie ends
Spoiler formatting can be applied to any element, and also works with descendants.
Some Math: a2 + b2 = c2

Paragraphs

Standard paragraph

Only first line
idented on paragraph.

Indented paragraph
on all lines.

Alignment

Left aligment
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan ultrices felis eu mollis. Donec varius, eros in fermentum iaculis, nunc lorem dapibus sem, vel blandit nibh odio eu ligula. Nam semper dui tellus, eu scelerisque felis mollis vitae.
Center aligment
Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec ultricies mattis neque sit amet mattis. Nullam erat enim, pulvinar ut aliquam vitae, mollis vitae purus. Quisque sed dolor enim.
Right aligment
Suspendisse at orci et sapien feugiat sollicitudin. Duis laoreet neque dui, sit amet interdum metus tempus in. Duis ac lacus lectus. Mauris hendrerit ullamcorper lacus et tempus.
Justified aligment
Curabitur vitae eros vitae nisl viverra dignissim. Aenean vulputate fringilla sapien. In eleifend ex nec ex tempus, sit amet dapibus ante rutrum. Praesent aliquet tortor eget sollicitudin viverra. Nulla pretium dolor sed est tincidunt, id malesuada eros iaculis. Nullam iaculis ultrices enim, quis vehicula metus egestas vel. Ut tincidunt elementum lectus congue malesuada. In commodo odio quis maximus laoreet. Morbi eget orci at metus sodales placerat. Aliquam erat volutpat. Vivamus ac dolor lacus.

Quotes

MAKING THE MOTHER OF ALL OMELETTES HERE, JACK! , said the Senator.

Free will is a myth. Religion is a joke. We are all pawns, controlled by something greater: Memes. The DNA of the soul. They shape our will. They are the culture. They are everything we pass on.

Monsoon, Metal Gear Rising: Revengeance

Notes

Similar to blockquote, a note says something related to the content presented previously, but not being any citation or figure.
To avoid confusion, the styling is also different.

Lists

  • some
  • unordered
  • list
  1. cheater
  2. speedrunner
  3. try-hard
  4. casual
Cheater
Player that breaks rules on competitions
Speedrunner
Player that tries to finish games as fast as possible
Try-hard
Player that self-challenges with hard situations on games
Completionist of games
Streamer that is bad at the game
Casual
Player with no care for speed of completition
Let's play slop

Code

A sentence explaining some function().

Code sample from another project: func _on_body_mouse_exited() -> void:
if _tooltip == null or not found: return _tooltip.visible = false
return
Complex code highlighting depends on the language and theme, so it's outside the scope of this project.

Figures

Without frame
Our logo
Our logo, no frame

With frame
Our logo
Our logo, with frame

Colors

Background colors

Normal color
Light color
Lighter color
Dark color
Darker color
All background colors also have semi-transparent variants, just add "_alpha" at the end of the class.

Border colors

Normal border

Light border

Lighter border

Dark border
Also using a background because dark is the same background color of the page.

Darker border
All border colors also have semi-transparent variants, just add "_alpha" at the end of the class.

Text colors

Normal text
Light text
Lighter text
Dark text
Darker text

Spacing

Margins

Horizontal margin
Vertical margin
Square margin

Paddings

Horizontal padding
Vertical padding
Square padding

Tooltips

With element

Some text with that needs It cannot be explained! extra explanation.

While it is possible to create tooltips with pseudo-elements, it's a terrible practice for accessbility - so I'm not implementing it.

Tables

Some of my favorite albums (no particular order)
Band Album Year Duration Genre
Engel Abandon All Hope 2018 47:09 Melodic Death Metal
Trivium Shogun (Special Edition) 2008 1:19:15 Thrash/Death Metal
Epica The Quantum Enigma 2014 1:14:31 Symphonic Metal
Iron Maiden Somewhere in Time 1986 51:24 Heavy Metal
Sepultura Kairos 2011 53:09 Groove Metal
Death Angel The Dream Calls for Blood 2013 54:13 Thrash Metal
Mudvayne Lost and Found 2005 53:09 Alternative Metal
Total 6:31:50

Form elements

Textboxes Text Input
Password Input
Email Input
Date/Time Inputs

Url Input
Phone Input
Number Input
Search Input
Buttons
Checkboxes
Radio
Color Input
Range
Not very customized due to current lack of a CSS Standard.
This project is not meant to use browser exclusive hacks.
File Input
Would you believe there's not yet a CSS Standard to further customize this?
Select Input
Again, there is still no standard to fully customize this.

Details

Individual

Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan ultrices felis eu mollis.

Multiple

Donec varius Donec varius, eros in fermentum iaculis, nunc lorem dapibus sem, vel blandit nibh odio eu ligula.
Nam semper Nam semper dui tellus, eu scelerisque felis mollis vitae.

Accordion

Interdum et malesuada Interdum et malesuada fames ac ante ipsum primis in faucibus.
Donec ultricies Donec ultricies mattis neque sit amet mattis. Nullam erat enim, pulvinar ut aliquam vitae, mollis vitae purus.

Dialogs

Do not belive the text
The header is lying.
Don't believe your lying eyes
There is no backdrop in Ba Sing Se.

Tabs

Horizontal (default)

First
Some content
Second
Other content
Third
Is this content?

Vertical

One
Little content
Two
Good content
Three
Too much content!
You don't need to put the tab content in a div role="tab" for the styling to work, but it is recommended for accessibility.
↥ Return to top